<template>
    <el-amap :class="editState?'amap-box-edit':'amap-box-add'" vid="amap" :events="events" :center="center" :zoom="zoom">
        <el-amap-marker vid="amap-marker" :position="position.LngLat" v-if="position.LngLat[0]" />
    </el-amap>
</template>

<script>
import {mapState} from "vuex";
import VueAMap from "vue-amap";

export default {
    name: "MapSelect",
    props: {
        editState: {
            require: true
        },
        city: {
            require: true
        },
        area: {
            require: false,
            default: function () {
                return {}
            }
        }
    },
    data() {
        const _this = this;
        return {
            position: {                                 //需要传回父组件的信息
                LngLat: [],
                address: ''
            },
            center: [104.06584, 30.65787],              //地图初始化视图中心点(默认成都市)
            zoom: 12,                                   //地图缩放比例
            plugin: [                                   //这里放扩展的插件
                'AMap.Autocomplete',
                'AMap.PlaceSearch',
                'AMap.Geocoder'
            ],
            events: {
                click(e) {
                    if (_this.city) {
                        //获取点击坐标
                        const {lng, lat} = e.lnglat;
                        //将中心定为选中位置
                        _this.center = [lng, lat];

                        //记录点击的坐标(这个坐标是否准确?
                        // _this.position.LngLat = [lng,lat];

                        //通过逆编码获取点击处的地址
                        AMap.service('AMap.Geocoder', function () {
                            let geocoder = new AMap.Geocoder({
                                radius: 1000,   //逆地理编码时，以给定坐标为中心点，单位：米
                                extensions: "all"   //逆地理编码时，返回信息的详略
                            });
                            geocoder.getAddress([lng, lat], function (status, result) {
                                if (status === 'complete' && result.info === 'OK') {
                                    if (result && result.regeocode.aois.length !== 0) {
                                        _this.position.LngLat = [result.regeocode.aois[0].location.lng, result.regeocode.aois[0].location.lat]
                                        _this.position.address = result.regeocode.aois[0].name;
                                    } else {
                                        _this.$message.warning("请选择更详细的地址")
                                    }
                                } else {
                                    console.log(status);
                                    console.log(result);
                                    _this.$message.warning("高德地图响应缓慢")
                                }
                            });
                        });
                        //因为是异步获取地址,如果处理太快只能返回空的内容,因此设置一个0.8秒的延时
                        setTimeout(() => {
                            //将子组件的data返还到父组件
                            _this.$emit('getPosition', _this.position);
                        }, 800);
                    }
                }
            }
        }
    },
    computed: {
        ...mapState({
            equipmentData: state => state.active.equipmentData,
            areaData: state => state.active.areaData
        })
    },
    methods: {
        initComponentData() {
            //初始化组件参数
            this.center = [104.06584, 30.65787];
            this.position.LngLat = [];
            this.position.address = '';
            this.zoom = 12;
        },
        setCenterByArea(area) {
            if (area.areaId) {
                this.center = [area.areaLng, area.areaLat];
                this.position.LngLat = [area.areaLng, area.areaLat];
            }
        }
    },
    watch: {
        city(newValue, oldValue) {
            if (newValue.length === 3) {
                let _this = this;
                AMap.service('AMap.PlaceSearch', function () {
                    //创建一个查询实例,规定其区域(省)范围
                    let search = new AMap.PlaceSearch({
                        city: newValue[1],
                        citylimit: true,
                        type: "风景名胜|商务住宅|政府机构及社会团体|道路附属设施|地名地址信息|公共设施"
                    });
                    search.search(newValue[2], function (status, result) {
                        if (result.poiList) {
                            const {lng, lat} = result.poiList.pois[0].location;
                            _this.center = [lng, lat];
                        }
                    })
                });
            }
        },
        area(newValue, oldValue) {
            this.setCenterByArea(newValue);
        }
    },
    created() {
        this.setCenterByArea(this.area);
    }
}
</script>

<style scoped>
.amap-box-add{
    width: 100%;
    height: 350px;
}

.amap-box-edit{
    width: 100%;
    height: 350px;
}
</style>